@-webkit-keyframes active_move_right {
  from {
    left: 0;
  }

  to {
    left:100%;
  } 
}

@-webkit-keyframes prev_move_right {
  from {
    left: -100%;
  }

  to {
    left:0;
  } 
}

@-webkit-keyframes active_move_left {
  from {

    left: 0;
  }

  to {
    left: -100%;
  } 
}

@-webkit-keyframes next_move_left {
  from {

    left: 100%;
  }

  to {
    left: 0;
  } 
}

.item {

  position: relative;
  display:none;
  //border: 3px solid red;

  &.active,
  &.next,
  &.prev {
    //display: inline-block;
    display: block;
    top:0;
    width: 100%;
  }

  &.active{
    //display: inline-block;
    display: block;
    top:0;
  }


  &.next,
  &.prev {
    position: absolute;
  }

  &.next.left {
    -webkit-animation-name: next_move_left;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
  }
  &.prev.right {
    /*left: 0;*/
    -webkit-animation-name: prev_move_right;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
  }

  &.active.left {
    /*left: -100%;*/
    -webkit-animation-name: active_move_left;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
  }

  &.active.right {
    /*left: 100%;*/
    -webkit-animation-name: active_move_right;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
  }
}